<template>
  <div class="rentRecord">
    <el-tabs type="card" @edit="handleTabsEdit" v-model="tableTabsValue">
      <el-tab-pane label="租金记录" name="rentRecordList">
        <el-form :inline="true" :model="findRentRecord" class="findBikeRenting" size="mini">
          <el-form-item label="租金缴纳时间">
            <el-date-picker
              v-model="findRentRecord.applyDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="检索输入" label-width="100px">
            <el-input v-model="findRentRecord.condition" clearable placeholder="请输入车辆id或者地址"></el-input>
          </el-form-item>
          <el-button type="primary" size="mini" @click="findRentRecordByCondition">查询</el-button>
        </el-form>
        <div class="rentRecordList">
          <el-table :data="rentRecordList" :header-cell-style="{
                'background-color': '#E8E8E8',
                'height': '3.56vw',
                'padding':'0',
                'border': 'none',
                'font-size':'0.7vw',
                'color':'#666666'
            }" height="600"
                    :row-class-name="tableRowClassName"
                    style="width: 100%;overflow: scroll;overflow-x: hidden !important;">
            <el-table-column type="index" label="序号" width="80px"></el-table-column>
            <el-table-column prop="id" label="租金记录id" width="150px" show-overflow-tooltip></el-table-column>
            <el-table-column prop="rentingId" label="在租记录的id" width="120px" show-overflow-tooltip></el-table-column>
            <el-table-column prop="payableTime" label="租金应缴日期"></el-table-column>
            <el-table-column prop="payTime" label="租金实缴日期"></el-table-column>
            <el-table-column prop="money" label="费用" width="120px"></el-table-column>
            <el-table-column prop="tenantId" label="租客id" width="150px" show-overflow-tooltip></el-table-column>
            <el-table-column prop="tenantName" label="租客名字"></el-table-column>
            <el-table-column label="状态">
              <template v-slot="scope">
                <el-tag v-if="scope.row.state==0">未到时间</el-tag>
                <el-tag v-if="scope.row.state==1" type="danger">已到时间</el-tag>
                <el-tag v-if="scope.row.state==2" type="success">已交租</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="130px">
              <template v-slot="scope">
                <el-button size="mini" type="warning" icon="el-icon-delete" @click="deleteRenting(scope.row.id)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            @prev-click="prevClick"
            @next-click="nextClick"
            background
            layout="total,sizes,prev, pager, next"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            :total="rentPage.count"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "RentRecord",
  data(){
    return{
      tableTabsValue:'rentRecordList',
      rentPage:{
        pageNo:1,
        pageSize:10,
        count:0,
      },
      findRentRecord:{

      },
      rentRecordList:[]
    }
  },
  methods:{
    sizeChange(val){
      this.rentPage.pageSize = val;
      this.findRentRecordByCondition();
    },
    currentChange(val){
      this.rentPage.pageNo = val;
      this.findRentRecordByCondition();
    },
    prevClick(val){

    },
    nextClick(val){

    },
    handleTabsEdit(){
      if(action==='remove'){
        this.tabList=[];
        this.tableTabsValue='rentRecordList'
        this.findRentRecordByCondition();
      }
    },
    findRentRecordByCondition(){
      let params = {
        pageNo:this.rentPage.pageNo,
        pageSize: this.rentPage.pageSize,
        condition:this.findRentRecord.condition,
      }
      if(this.findRentRecord.applyDate!=null&&this.findRentRecord.applyDate!=''){
        params['startTimeSearch'] = this.findRentRecord.applyDate[0];
        params['endTimeSearch'] = this.findRentRecord.applyDate[1];
      }
      this.$network.findRentPage(params).then(res=>{
        this.rentRecordList = res.data.data.list
        this.rentPage.count  = res.data.data.count;
      }).catch(err=>{
        console.log(err)
      })
    },
    tableRowClassName({row, rowIndex}) {
      let index = rowIndex;
      if (index % 2 == 0) {
        return 'warning-row'
      } else {
        return 'warning-col'
      }
    },
    deleteRenting(id){
      //删除
      this.$confirm('确定删除这条记录吗？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res=>{
        //向后端发送请求，删除这条数据
        let params = {
          id:id
        }
        this.$network.deleteRent(params).then(res=>{
          if(res.data.code=='200'){
            this.$message({
              message:'删除成功',
              type:'success'
            })
            this.findRentRecordByCondition()
          }

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  beforeMount() {
    this.findRentRecordByCondition()
  }
}
</script>

<style scoped>

</style>
